<template>
  <div class="good">
    <div class="goods-wrapper">
        <div class="goods-box" v-for="item in list" :key="item.id">
          <!-- 图片 -->
          <img :src="item.img" />
          <!-- 商品名称 -->
          <p>{{ item.name }}</p>
          <!-- 价格 -->
          <b class="b1">{{ item.price }}</b>
          <br />
          <span class="b2">原</span>
          <!-- 原价 -->
          <span class="b3">￥{{ item.oldprice }}</span>
        </div>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
export default {
  data() {
    return {
      list: [
        {
          id: "goods1",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/713110750-2164619551241515008-2164619551241543683-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods2",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/410170912-2248499012496396288-2248499012496449538-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods3",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/1982437894-1308654164728070144-1308654164728074243-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods4",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/1887825259-2549395870211465216-2549395870211465218-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods5",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/713110750-2164619551241515008-2164619551241543683-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods6",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/410170912-2248499012496396288-2248499012496449538-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods7",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/1982437894-1308654164728070144-1308654164728074243-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods8",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/1887825259-2549395870211465216-2549395870211465218-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods9",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/713110750-2164619551241515008-2164619551241543683-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods10",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/410170912-2248499012496396288-2248499012496449538-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods11",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/1982437894-1308654164728070144-1308654164728074243-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
        {
          id: "goods12",
          img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00124572/10012702/1887825259-2549395870211465216-2549395870211465218-1_90x90_90.jpg",
          name: "【一件有诚意的T】丝光棉t恤女短袖液氨圆领短袖t恤女打底白t",
          price: "￥69",
          oldprice: 1200,
        },
      ],
    };
  },
  mounted() {
    let bs = new BetterScroll(".good", { scrollX: true });
  },
};
</script>

<style lang="stylus" scoped>
.good{
    width: 92%;
    height: 180px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #000;
    padding: 15px;
    margin-left: 15px;
    overflow hidden
    >.goods-wrapper {
        width max-content
        display: flex;
        >.goods-box {
            width: 100px;
            height: 165px;
            >p {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 10px;
            }

            >b {
                color: #c1ab96;
                font-size: 10px;
            }
            >.b2 {
                width: 15px;
                height: 15px;
                display: block;
                border-radius: 3px;
                background-color: #8d8d8c;
                color: #fff;
                text-align: center;
                font-size: 10px;
                line-height: 15px;
                float: left;
            }
            >.b3 {
                text-decoration: line-through;
                height: 15px;
                font-size: 10px;
                line-height: 15px;
                display: block;
                text-indent: 5px;
                font-weight: bold;
            }
        }
    }
}
</style>
